<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Nav bar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="../css/semantic.min.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/global.css">
	<script type="text/javascript" src="../js/libs/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/libs/semantic.min.js"></script>
</head>
<body>
	<div class="is-menu"><i class="th icon primary"></i></div>
    <div class="ui top fixed inverted menu" id="menu">
    	<div class="item brand">
    		<i class="large arrow circle down icon link"></i>
    	</div>
        <a class="item">One</a>
        <a class="active item">Two</a>
        <a class="item">Three</a>
        <a class="item">
        	<div class="ui dropdown">
        		<i class="dropdown icon"></i>
        		SelectionOne
        		<div class="menu">
        			<div class="item">SelectionOne</div>
        			<div class="item">SelectionTwo</div>
        			<div class="item">SelectionThree</div>
        			<div class="item">SelectionFour</div>
        		</div>
        	</div>
        </a>

        <div class="right menu">
        	<div class="item">
            	<div class="ui icon input" >
            		<i class="search link icon"></i>
            		<input type="text" placeholder="search...">
            	</div>
        	</div>
            <a href="" class="item">Register</a>
        </div>
    </div>
	<div class="ui main container mt-80">
		<div class="ui segment basic">
	    	<h1 class="ui header">带有下拉菜单和搜索条的导航栏
				<div class="sub header">在导航栏左侧末尾添加下拉菜单</div>
			</h1>
	    </div>
		
		<div class="ui segment">
			<p>在<a href="./menu-responsive-nav-bar-search.html" target="_blank" style="color:orange">带有搜索条的导航栏</a>基础上，稍作调整即可在左侧将第四个菜单项换成一个下拉菜单。实现这个的基本思路会用到 semanticUI 中下拉菜单相关的知识。在 semanticUI 的下拉菜单中，从视觉上讲有两种不同的方式。一种是带有类似于 input 输入框效果的，并且其中显示有提示用语或者缺省值，这个一般用于用户填写表单的页面中；另一种是直接显示一个文字，没有输入框的，文字的左侧或右侧有下拉箭头提示，这个适合于用在导航栏菜单中。</p>
			<div class="ui segment inverted">
				<pre><code>&lt;a class="item"&gt;
	&lt;div class="ui dropdown"&gt;
		&lt;i class="dropdown icon"&gt;&lt;/i&gt;
		SelectionOne
		&lt;div class="menu"&gt;
			&lt;div class="item"&gt;SelectionOne&lt;/div&gt;
			&lt;div class="item"&gt;SelectionTwo&lt;/div&gt;
			&lt;div class="item"&gt;SelectionThree&lt;/div&gt;
			&lt;div class="item"&gt;SelectionFour&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;</code></pre>
			</div>
			<p>顺便，对比一下那种会显示输入框效果的下拉选择框的实现。</p>
				<div class="ui segment inverted">
				<pre><code>&lt;a class="item"&gt;
	&lt;div class="ui <span style="color: orange">selection</span> dropdown"&gt;
		&lt;i class="dropdown icon"&gt;&lt;/i&gt;
		<span style="color: orange">&lt;div class="default text"&gt;请选择...&lt;/div&gt;</span>
		&lt;div class="menu"&gt;
			&lt;div class="item"&gt;SelectionOne&lt;/div&gt;
			&lt;div class="item"&gt;SelectionTwo&lt;/div&gt;
			&lt;div class="item"&gt;SelectionThree&lt;/div&gt;
			&lt;div class="item"&gt;SelectionFour&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;</code></pre>
			</div>
			<p>可以看到，做成下拉框有两处不同：第一是缺省显示提示文字要用div.default.text包裹起来；第二是外层.ui.dropdown要添加.selection，即变成 <span class="ui label">div.ui.selection.dropdown</span></p>
		</div>
	</div>
	
</body>
<script>
$(function(){
    $('.is-menu').click(function(){
        $('i',this).toggleClass('arrow circle up');
        $('#menu').transition('slide down')
    })
    $('.ui.dropdown').dropdown();
})
</script>
</html>